<template> 
	<view>
		<view class="flex space alcenter mb30">
			<view class="flex alcenter">
				<image class="unio2o-store-logo" :src="''"></image>
				<view  class="ml20 ft16 text-default">
					卡夫卡少儿艺术培训…
				</view>
			</view>
			<view class="ft14 text-notice">
				2018-11-01 12:00
			</view>
		</view>
		
		<view class="unicard-coupon box-shadow pd30 mt20 bg-w  bdr16">
			<view class="flex alcenter space pb30 bdb1">
				<view class="flex alcenter">
					<image class="unicard-money-icon" :src="''"></image>
					<text class="ft20 ftw600 text-default ml20">88代100元券</text>
				</view>

				<view class="unicard-frequency">
					-1次
				</view>
			</view>
			
			<view class="flex space mt30 alcenter">
				<text class="ft14 text-notice">满100元使用</text>
				<view class="unicard-tag-use">免费消费5次</view>
			</view>
			<view class="flex space mt30 alcenter ft14">
				<view>
					<text class="text-notice">已消费：</text>
					<text class="ftw600 text-main">5次</text>
				</view>
				
				<view>
					<text class="text-notice">剩余消费：</text>
					<text class="ftw600 text-theme">0次</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				
			}
		}
	}
</script>

<style>
	.unicard-frequency{
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border:2rpx solid #FF6D00;
		color:#FF6D00;
		text-align: center;
		line-height: 84rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	.unicard-money-icon{
		width: 64rpx;
		height: 64rpx;
	}
	.unicard-tag-use{
		background:linear-gradient(90deg,rgba(241,226,201,1) 0%,rgba(243,187,110,1) 100%);
		height: 36rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 8rpx;
		color: #764E18;
	}
	.unicard-coupon{
		border-left: 10rpx solid #FF6D00;
	}
	.unicard-coupon .bdb1{
		border-bottom: 2rpx dashed #FF6D00;
	}
</style>